<!--  -->
<template>
  <div>
    <div class="wrap">
      <div class="userInfo clear" v-show="boxShow">
        <div class="userName fl">股东人数</div>
        <div class="back fr" @click="back">返回上一页</div>
        <!-- <div class='searchContainer'>
            <el-input class="inp" v-model="params.stockCode" placeholder="请输入股票名称/代码"></el-input>
            <span class="btn searchStock" @click='getDataList'>搜 索</span><span @click='resetFn' class="btn resetBtn">重 置</span>
        </div> -->

        <div class='searchContainer'>
            <el-input class="inp"  prefix-icon="el-icon-search" v-model="params.stockCode" placeholder="请输入股票名称/代码">
              <span slot="append" class="btn searchStock" @click='getDataList'>股票搜索</span>
            </el-input> 
            <span @click='resetFn' class="resetBtn">重 置</span>
        </div>

      </div>
      <div class="table" v-show="boxShow">
        <div class="tag flex">
          <span
            class="item"
            v-for="item in tags"
            :key="item.value"
            :class="{ cur: params.type == item.value }"
            @click="changeTag(item)"
            >{{ item.label }}</span
          >
        </div>
        <table>
          <thead>
            <tr>
              <td width="50" rowspan="2">序号</td>
              <td rowspan="2">股票代码</td>
              <td rowspan="2">股票简称</td>
              <td rowspan="2">相关资料</td>
              <td colspan="3">股东人数</td>
              <td colspan="2">前十大流通股东</td>
              <td colspan="2">机会持仓</td>
              <td rowspan="2">筹码集中度</td>
              <td rowspan="2">披露日期</td>
            </tr>
            <tr>
              <td>股东人数<br />（户）</td>
              <td>较上期变化</td>
              <td>人均流通股<br />（股）</td>
              <td>持股数量<br />（万股）</td>
              <td>占流通<br />股本比例</td>
              <td>持股数量<br />（万股）</td>
              <td>占流通<br />股本比例</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableData" :key="item.id">
              <td>{{ index + 1 }}</td>
              <td
                v-for="nav in theads"
                :key="nav.value"
                v-html="item[nav.value]"
                @click="toF10($event, item)"
              ></td>
            </tr>
          </tbody>
        </table>
        <div class="noMore" v-show="noMore">暂无数据</div>
      </div>
      <m-page
        v-show="boxShow"
        @onPage="onPage"
        :pageSize="params.pageSize"
        :currentPage="params.pageNo"
        :total.sync="total"
      ></m-page>
    </div>
  </div>
</template>
<script>
import { getDataList } from "../api/index";
const mPage = () => import("../components/mPage");
import { numberFormat } from "../script/utils";
import { CLIENT } from "@/common/const";
export default {
  data() {
    return {
      params: {
        moduleId: 5,
        holderName: "",
        type: 1,
        pageNo: 1,
        pageSize: 20,
        stockCode:'',//股票
      },
      boxShow: false,
      followStatus: 0,
      noMore: "",
      total: 0,
      tags: [
        {
          label: "沪深A股",
          value: 1,
        },
        {
          label: "沪市A股",
          value: 2,
        },
        {
          label: "深市A股",
          value: 3,
        },
        // {
        //   label: "中小板",
        //   value: 4,
        // },
        {
          label: "创业板",
          value: 5,
        },
      ],
      tableData: [],
      theads: [
        {
          label: "股票代码",
          value: "stockCode",
        },
        {
          label: "股票简称",
          value: "stockName",
        },

        {
          label: "相关资料",
          value: "means",
        },
        {
          label: "股东人数（户）",
          value: "holderNum",
        },
        {
          label: "较上期变化",
          value: "avgPctChange",
        },
        {
          label: "人均流通股（股）",
          value: "avgHoldNum",
        },
        {
          label: "持股数量（万股）",
          value: "totalHoldNum",
        },
        {
          label: "占流通股本比例",
          value: "totalHoldPct",
        },
        {
          label: "持股数量（万股）",
          value: "holdNumEnd",
        },
        {
          label: "占流通股本比例",
          value: "holdPctEnd",
        },
        {
          label: "筹码集中度",
          value: "avgNum",
        },
        {
          label: "披露日期",
          value: "reportDate",
        },
      ],
    };
  },
  components: { mPage },
  computed: {},
  mounted() {
    this.getDataList();
  },
  methods: {
    back() {
      this.$router.go(-1); //返回上一层
    },
    changeTag(row) {
      this.params.type = row.value;
      this.params.pageNo = 1;
      this.getDataList();
    },
    onPage(page) {
      this.params.pageNo = page;
      this.getDataList();
    },
    toF10(e, row) {
      if (e.target.className != "means") return;
      window.prompt(
        "",
        `up://["open.web",${Date.now()},{"url":"${CLIENT}/webclient/f10/index.html?stock=sz${
          row.stockCode
        }#/partner","title":"${row.stockName}","popuptype":0}]`
      );
    },
    async getDataList() {
      await getDataList(this.params).then((back) => {
        if (back.status == 1) {
          let list = back.data.list||[];
          let total = back.data.total;
          this.tableData = list.map((item) => {
            if (item.avgHoldNum > 5000) {
              item.avgNum = "非常集中";
            }
            if (item.avgHoldNum > 3000 && item.avgHoldNum < 5000) {
              item.avgNum = "较集中";
            }
            if (item.avgHoldNum > 2000 && item.avgHoldNum < 3000) {
              item.avgNum = "较分散";
            }
            if (item.avgHoldNum < 2000) {
              item.avgNum = "非常分散";
            }
            item.means = `<span class="means">相关资料</span>`;
            if (item.avgPctChange > 0) {
              item.avgPctChange = `<span class="red">${item.avgPctChange}</span>`;
            }
            if (item.avgPctChange < 0) {
              item.avgPctChange = `<span class="green">${item.avgPctChange}</span>`;
            }
            item.avgHoldNum = numberFormat(item.avgHoldNum);
            item.totalHoldPct = numberFormat(item.totalHoldPct) + "%";
            item.holdPctEnd = numberFormat(item.holdPctEnd) + "%";
            item.holderNum = numberFormat(item.holderNum);
            item.totalHoldNum = Number(item.totalHoldNum / 10000).toFixed(2);
            item.holdNumEnd = Number(item.holdNumEnd / 10000).toFixed(2);
            return item;
          });
          this.noMore = total == 0 ? true : "";
          this.total = total;
          this.boxShow = true;
        }
      
      
      });
    },
     // 重置
    resetFn(){
        this.params.pageNo = 1;
        this.params.industryName=''
        this.params.stockCode=''
        this.getDataList();
    }
  },
};
</script>
<style>
@import '../style/search.scss';
table .red {
  color: #ea2827;
}
table .green {
  color: #31ed24;
}
table .means {
  text-decoration: underline;
  color: #fa7131;
  cursor: pointer;
}
</style>
<style lang="scss" scoped>
@import '../style/search.scss';
.wrap {
  width: 1200px;
  margin: 0 auto;
  .userInfo {
    margin: 10px 0;
    position: relative;
    .userName {
      font-size: 26px;
      color: #ff8a00;
      line-height: 42px;
    }
    .back {
      width: 108px;
      height: 30px;
      background: linear-gradient(0deg, #343845, #4e596d);
      border: 1px solid #3d3d4b;
      border-radius: 2px;
      cursor: pointer;
      margin-top: 4px;
      color: #fff;
      font-size: 15px;
      text-align: center;
      line-height: 30px;
      &:hover {
        background: linear-gradient(180deg, #b93636, #6a0101);
        border: 1px solid #b83636;
      }
    }
  }
  .table {
    border: 2px solid #27282e;
    border-radius: 6px;
    .tag {
      align-items: center;
      height: 34px;
      background: #27282e;
      .item {
        font-size: 16px;
        color: #cccccc;
        display: inline-block;
        padding: 5px 10px;
        margin: 0 10px;
        cursor: pointer;
        &.cur {
          background: #35497c;
          border-radius: 4px;
        }
      }
    }
    table {
      width: 100%;
      font-size: 15px;
      color: #cccccc;
      text-align: center;
      table-layout: fixed;
      td {
        line-height: 19px;
        padding: 5px;
      }
      thead {
        background: #1c1d21;
        td {
          border: 1px solid #323337;
        }
      }
      tbody {
        tr:nth-of-type(2n) {
          background: #111117;
        }
        td {
          border: 1px solid #25262a;
        }
      }
    }
    .noMore {
      line-height: 200px;
      text-align: center;
      color: #b8b4b4;
      font-size: 16px;
    }
  }
}
</style>

